0<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX请求分页</title>
	<style>
		table {
	    background-color:#fff;color:#666;border-collapse: collapse;border-spacing: 0;
		}
		table, td, th {
	    margin: 0;
	    padding: 0;
	    vertical-align: middle;
	    text-align:left;
		}
		tbody td{
	    background-color: #DFC;
	    border-width:1px;border-style:solid;
		  border-color:#e6e6e6;box-sizing:border-box;border-top:none;border-left:none;
	    padding:5px;line-height:20px;font-size:14px;
		}
		thead th {
	    font-size: 14px;
	    font-weight: bold;
	    line-height: 19px;
	    padding: 0 8px 2px;
	    text-align:center;
		}
		tbody tr.odd th,tbody tr.odd td { /*odd就是偶数行*/
	    background-color: #CEA;
	    border-bottom: 2px solid #67BD2A;
		}
		
		tbody tr:hover td{
	    background-color: #8b7;
	    color:#fff;
		}
	</style>
</head>
<body>
 	<table cellpadding="0" cellspacing="0" border="0">
 		<thead>
 			<tr>
				<th>ID</th>
				<th>OID</th>
				<th>TYPE</th>
				<th>TEL</th>
				<th>NAME</th>
				<th>CONTENT</th>
				<th>JSON</th>
				<th>CDATE</th>
				<th>UPDATE</th>
			</tr>
 		</thead>
 		<tbody>
 			
 		</tbody>
	</table>
 	<div class="footer">
 		<span>共<span class="all">100</span>页</span>
 		<button class="first">首页</button>
		<button class="pre">上一页</button>
		<button class="next">下一页</button>
		<button class="end">尾页</button>
		<select class="pageSize">
			<option value="5">每页显示5行</option>
			<option value="10" selected>每页显示10行</option>
			<option value="15">每页显示15行</option>
		</select>
		<span>第<span class="now">1</span>页</span>
 	</div>

  <script src="jquery-3.2.1.min.js"></script>
  <script>
  	var pageNum = 1;  //当前页面
  	var pageSize = 10; //每页显示几行
  	var endPage;  //总页数

  	//点击上一页事件
  	$(".pre").click(function(){
  		if(pageNum != 1){
  			pageNum--;
  		}else{
  			pageNum = 1;
  		}
  		ajaxPage(pageNum,pageSize);
  	});
  	//点击下一页事件
  	$(".next").click(function(){
  		if(pageNum != endPage){
  			pageNum++;
  		}else{
  			pageNum = endPage;
  		}
  		ajaxPage(pageNum,pageSize);
  	});
  	//点击首页事件
  	$(".first").click(function(){
  		pageNum = 1;
  		ajaxPage(pageNum,pageSize);
  	});
  	//点击尾页事件
  	$(".end").click(function(){
  		pageNum = endPage;
  		ajaxPage(pageNum,pageSize);
  	});
  	//改变select选择
  	$(".pageSize").change(function(){
  		pageSize = $(this).val();
  		ajaxPage(pageNum,pageSize);
  	});

  	//ajax请求分页 num:当前页面，size:每页显示几行，end总页数
  	function ajaxPage(num,size){
  		$.ajax({
	      url: "http://127.0.0.1/PHPStudy/AjaxPHP-paging.php",
	      type:"post",
	      dataType:"json",
	      data:{"pageNum": num, "pageSize": size},
	      success:function(res){
	        //console.log(res);
	        var pageHtml = "";
	        endPage = res.endPage;
	        $(".now").html(res.pageNum);
	        $(".all").html(res.endPage);
	        res.pageData.forEach(function(e,i,arr){
	        	pageHtml += `
	        						<tr>
								 				<td>${e.id}</td><td>${e.oid}</td><td>${e.type}</td>
								 				<td>${e.tel}</td><td>${e.name}</td><td>${e.content}</td>
								 				<td>${e.JSON}</td><td>${e.cdate}</td><td>${e.udate}</td>
								 			</tr>
	        							`;
	        });
	        $("tbody").empty();
	        $("tbody").html(pageHtml);
	      },
	      error:function(msg){
	        console.log("error",msg);
	      }
	    });
  	}
  	//默认加载一次
  	ajaxPage(pageNum,pageSize);
			
		
		
  </script>
</body>
</html>